<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/vaadin-dialog/vaadin-dialog.html">
<link rel="import" href="../../bower_components/paper-progress/paper-progress.html">

<dom-module id="script-edit">
    <template>
        <style include="shared-styles dialogs">
            paper-card {
                display: block;
            }

            .submit-btn {
                background-color: var(--mist-blue);
                color: #fff;
            }

            .progress {
                margin: 0 -24px;
                padding-top: 24px;
            }
            .progress p {
                padding: 8px 24px;
            }
            paper-progress {
                width: 100% !important;
            }
            .errormsg-container {
                color: var(--red-color) !important;
                word-break: break-word;
            }
            .errormsg-container iron-icon {
                color: inherit;
            }
            hr.appform {
                margin: 0;
                opacity: 0.3;
            }
        </style>

        <vaadin-dialog id="editScriptModal" theme="mist-dialog" with-backdrop>
            <template>
                <h2>Edit Script</h2>
                <div class="paper-dialog-scrollable">
                    <p>
                        <paper-input id="name" label="Name" error-message="Please enter script's name" value="{{newScript.name}}"></paper-input>
                        <paper-textarea id="description" label="Description (optional)" rows="5" max-rows="5" error-message="Please enter script's description" value="{{newScript.description}}"></paper-textarea>
                    </p>
                    <div class="progress">
                        <paper-progress id="progress" indeterminate hidden$="[[!sendingData]]"></paper-progress>
                        <paper-progress id="progresserror" value="100" hidden$="[[!formError]]"></paper-progress>
                        <hr class="appform"/>
                        <p class="errormsg-container" hidden$="[[!formError]]"><iron-icon icon="icons:error-outline"></iron-icon><span id="errormsg"></span></p>
                    </div>
                </div>
                <div class="btn-group">
                    <paper-button dialog-dismiss>Cancel</paper-button>
                    <paper-button class="submit-btn btn-block" disabled$="[[!formReady]]" raised on-tap="_submitForm">Submit</paper-button>
                </div>
            </template>
        </vaadin-dialog>

        <iron-ajax id="scriptEditAjaxRequest" url="/api/v1/scripts/[[script.id]]" method="PUT" on-response="_handleScriptEditAjaxResponse" on-error="_handleScriptEditAjaxError" loading="{{sendingData}}" handle-as="xml"></iron-ajax>
    </template>

    <script>
        (function() {
            'use strict';

            Polymer({
                is: 'script-edit',

                properties: {
                    script: {
                        type: Object
                    },
                    newScript: {
                        type: Object,
                        computed: '_computeNewScript(script)',
                        notify: true
                    },
                    sendingData: {
                        type: Boolean,
                        value: false
                    },
                    formReady: {
                        type: Boolean,
                        computed: '_computeFormReady(newScript.name, sendingData)'
                    },
                    formError: {
                        type: Boolean,
                        value: false
                    },

                },
                listeners: {
                    'iron-overlay-closed': '_modalClosed',
                    'input': 'hideErrors'
                },
                _computeNewScript: function(script) {
                    if (script){
                        return {
                            name: script.name,
                            description: script.description
                        };
                    }
                },
                _computeFormReady: function(name, sendingData) {
                    var formReady = false;

                    if (name) {
                        formReady = true;
                    }

                    if (sendingData) {
                        formReady = false;
                    }

                    return formReady;
                },
                _openEditScriptModal: function(e) {
                    this.$.editScriptModal.opened = true;
                },
                _closeEditScriptModal: function(e) {
                    this.$.editScriptModal.opened = false;
                },
                _modalClosed: function() {
                    this._formReset();
                },
                _submitForm: function(e) {
                    this.$.scriptEditAjaxRequest.headers["Content-Type"] = 'application/json';
                    this.$.scriptEditAjaxRequest.headers["Csrf-Token"] = CSRF_TOKEN;
                    this.$.scriptEditAjaxRequest.body = {
                        new_name: this.newScript.name,
                        new_description: this.newScript.description
                    };
                    this.$.scriptEditAjaxRequest.generateRequest();
                },
                _formReset: function() {
                    //   this.set('script.id', '');
                },
                _handleScriptEditAjaxResponse: function(e) {
                    this._closeEditScriptModal();
                },
                _handleScriptEditAjaxError: function(e,d) {
                    this.set('formError', true);
                    // console.log('FAIL', e)
                    // this.$.errormsg.textContent = e.detail.request.xhr.response.body.innerText;
                    this.$.errormsg.textContent = e.detail.request.xhr.responseText;
                },
                hideErrors: function(e) {
                    this.set('formError', false);
                }
            });
        })();
    </script>
</dom-module>
